<template>
  <div class="content-box">
    <nav-title title="基本信息" />
    <div class="line">
      <span class="important">*</span>
      <div class="label">姓</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.lastName">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">名</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.firstName">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">姓名拼音</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.nameAc">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">曾用名</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.rsUsedName">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">性别</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="sexVal" :columns="sexLength" placeholder="请选择" v-model="basicInfo.sex" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">国籍</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="couVal" :columns="couLength" placeholder="请选择" v-model="basicInfo.countryValue" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">出生日期</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="basicInfo.birthdate"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">民族</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="natVal" :columns="natLength" placeholder="请选择" v-model="basicInfo.ethnicGrpCdValue" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">籍贯</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.nativePlaceChn">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">最高学历</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="heduVal" :columns="heduLength" placeholder="请选择" v-model="basicInfo.highestEducLvl" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">毕业学校</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cSchool">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">专业</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cMajor">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">参加工作时间</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="basicInfo.startDtChn"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">入本公司时间</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="basicInfo.rsWklifBgnDt"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">现在职称</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cPosition">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">政治面貌</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="polsVal" :columns="polsLength" placeholder="请选择" v-model="basicInfo.politicalStaChn" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">入党(团)时间</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="basicInfo.cDate"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">有无驾照</div>
      <div class="value">
        <group label-width="5em">
          <popup-radio placeholder="请选择" :options="lcList" v-model="basicInfo.cYesNo"></popup-radio>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">身高(CM)</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.rsPersHeight">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">体重(KG)</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.rsPersWeight">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">血型</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="blodVal" :columns="blodLength" placeholder="请选择" v-model="basicInfo.rsBloodType" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">健康状况</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="helVal" :columns="helLength" placeholder="请选择" v-model="basicInfo.rsHealthStatus" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">婚姻状况</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="mryVal" :columns="mryLength" placeholder="请选择" v-model="basicInfo.marStatus" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">生育状况</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="bearVal" :columns="bearLength" placeholder="请选择" v-model="basicInfo.cBear" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">证件类型</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="itVal" :columns="itLength" placeholder="请选择" v-model="basicInfo.nationalIdType" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">证件号码</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.nationalId">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">户籍地址</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.addresslong1">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">家庭详细地址</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.addresslong3">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">现在居住地址</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.addresslong2">
      </div>
    </div>
    <div class="line" style="border-bottom:0;">
      <span class="important">*</span>
      <div class="label">指定送达地址</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="sendVal" :columns="sendLength" placeholder="请选择" v-model="basicInfo.cSendTypeValue" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label"></div>
      <div class="value">
        <input type="text" style="line-height:40px;" placeholder="请在此输入" v-model="basicInfo.cAddress">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">住宅电话</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.phone1">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">手机号码</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.phone">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">个人Email</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.emailAddr">
      </div>
    </div>

    <div class="line">
      <span class="important"></span>
      <div class="label">个人特长</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cDescrlong">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">兴趣爱好</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.rsHobby">
      </div>
    </div>

    <div class="line">
      <span class="important"></span>
      <div class="label">个人档案所在地</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cArchiveAddr">
      </div>
    </div>

    <div class="line">
      <span class="important"></span>
      <div class="label">是否有过犯罪记录？</div>
      <div class="value">
        <group label-width="5em">
          <popup-radio placeholder="请选择" :options="lcList" v-model="basicInfo.cYesNo4"></popup-radio>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label"></div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cDescrlong1">
      </div>
    </div>

    <div class="line">
      <span class="important"></span>
      <div class="label">曾否因大病入院或患有特殊疾病？</div>
      <div class="value">
        <group label-width="5em">
          <popup-radio placeholder="请选择" :options="lcList" v-model="basicInfo.cYesNo1"></popup-radio>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label"></div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cDescrlong2">
      </div>
    </div>

    <div class="line">
      <span class="important"></span>
      <div class="label">是否对其他公司负竞业限制义务？</div>
      <div class="value">
        <group label-width="5em">
          <popup-radio placeholder="请选择" :options="lcList" v-model="basicInfo.cYesNo2"></popup-radio>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label"></div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cDescrlong3">
      </div>
    </div>

    <div class="line">
      <span class="important"></span>
      <div class="label">是否曾在本集团任职或建立过劳动关系？</div>
      <div class="value">
        <group label-width="5em">
          <popup-radio placeholder="请选择" :options="lcList" v-model="basicInfo.cYesNo3"></popup-radio>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label"></div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cDescrlong4">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">其他补充说明</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="basicInfo.cDescrlong5">
      </div>
    </div>

    
    <div class="bsbtn" @click="save">
      保存
    </div>
  </div>

</template>

<script>
import { Datetime, Group, PopupPicker,PopupRadio } from 'vux'
import { getDicItem, saveBsinfo, getCountry, getNation, getIdType, getQrmsg } from '../../../api/api'
import { json2Form } from '../../../util/http'

export default {

  name: 'basicif',
  components: {
    Datetime, Group, PopupPicker, PopupRadio
  },
  mounted(){
    this.getsexDic()
    this.getcoulb()
    this.getnatlb()
    this.gethlDic()
    this.getpolDic()
    this.getbloodDic()
    this.gethelDic()
    this.getmarDic()
    this.getbearDic()
    this.getIdlb()
    this.getsendDic()
  },
  data() {
    return {
      basicInfo:{
        name:'',
        rsHireId: 'T003346',
        cEmplFrom: 130,
        regRegion: 1,
        rsCompleteFlg:'C',
        rsHirSource:10,
        rsHirStatus:'W'
      },
      getDate:'',
      score:'',
      sexVal:[],
      couVal:[],
      natVal:[],
      heduVal:[],
      polsVal:[],
      blodVal:[],
      helVal:[],
      mryVal:[],
      bearVal:[],
      itVal:[],
      sendVal:[],
      sexLength:1,
      couLength:1,
      natLength:1,
      heduLength:1,
      polsLength:1,
      blodLength:1,
      helLength:1,
      mryLength:1,
      bearLength:1,
      itLength:1,
      sendLength:1,
      lcList: [{value: '有', key: 'Y'},{value: '无', key: 'N'}],
    }
  },
  created() {
    this.getBsif()
  },
  methods: {
    save() {
      this.basicInfo.sex=this.basicInfo.sex[0]
      this.basicInfo.country=this.basicInfo.country[0]
      this.basicInfo.ethnicGrpCd=this.basicInfo.ethnicGrpCd[0]
      this.basicInfo.highestEducLvl=this.basicInfo.highestEducLvl[0]
      this.basicInfo.politicalStaChn=this.basicInfo.politicalStaChn[0]
      this.basicInfo.rsBloodType=this.basicInfo.rsBloodType[0]
      this.basicInfo.rsHealthStatus=this.basicInfo.rsHealthStatus[0]
      this.basicInfo.marStatus=this.basicInfo.marStatus[0]
      this.basicInfo.cBear=this.basicInfo.cBear[0]
      this.basicInfo.nationalIdType=this.basicInfo.nationalIdType[0]
      this.basicInfo.cSendType=this.basicInfo.cSendType[0]
      this.basicInfo.name = this.basicInfo.firstName+this.basicInfo.lastName
      console.log(this.basicInfo)
      saveBsinfo(json2Form(this.basicInfo)).then(res => {
        console.log(res)
      })
      /*if(this.skill.length === 0){
        this.$vux.alert.show({
          title: '警告',
          content: '请选择技能名称'
        });
        return;
      }

      saveComputer(json2Form(params)).then(res => {
        const that = this;
        //成功：000000
        if(res && res.retCode === '000000' ){
          //保存成功
          this.$vux.alert.show({
            title: '新城',
            content: '保存成功',
            onHide () {
              that.$router.push('/');
            }
          })

        }else{
          // 显示
          this.$vux.alert.show({
            title: '',
            content: res.retMsg
          })
        }
      }).catch (res=>{
        this.$vux.alert.show({
          title: '警告',
          content: '网络异常，请稍后重试'
        })
      })*/
    },

    //性别
    getsexDic() {
      this.sexVal = []
      let params = {
        fileName: 'SEX'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.sexVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.sexLength = res.retData.length
        console.log(res)
      }).catch(res => {

      })
    },
    //国籍
    getcoulb() {
      getCountry().then(res => {
        res.retData.forEach((val) => {
          this.couVal.push({name: val.descrshort, value: val.country})
        });
        this.couLength = res.retData.length
      })
    },
    //民族
    getnatlb() {
      getNation().then(res => {
        res.retData.forEach((val) => {
          this.natVal.push({name: val.descrshort, value: val.ethnicGrpCd})
        });
        console.log(res)
        this.natLength = res.retData.length
      })
    },
    //学历
    gethlDic() {
      this.labelVal = []
      let params = {
        fileName: 'HIGHEST_EDUC_LVL'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.heduVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.heduLength = res.retData.length
      }).catch(res => {

      })
    },
    //政治
    getpolDic() {
      let params = {
        fileName: 'POLITICAL_STA_CHN'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.polsVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.polsLength = res.retData.length
      }).catch(res => {

      })
    },
    //血型
    getbloodDic() {
      let params = {
        fileName: 'RS_BLOOD_TYPE'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.blodVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.blodLength = res.retData.length
      }).catch(res => {

      })
    },
    //健康
    gethelDic() {
      let params = {
        fileName: 'RS_HEALTH_STATUS'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.helVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.helLength = res.retData.length
      }).catch(res => {

      })
    },
    //婚姻
    getmarDic() {
      let params = {
        fileName: 'MAR_STATUS'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.mryVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.mryLength = res.retData.length
      }).catch(res => {

      })
    },

    //生育
    getbearDic() {
      let params = {
        fileName: 'C_BEAR'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.bearVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.bearLength = res.retData.length
      }).catch(res => {

      })
    },
    //证件
    getIdlb() {
      getIdType().then(res => {
        res.retData.forEach((val) => {
          this.itVal.push({name: val.descr.substring(3), value: val.nationalIdType})
        });
        console.log(res)
        this.itLength = res.retData.length
      })
    },
    //指定送达
    getsendDic() {
      let params = {
        fileName: 'C_SEND_TYPE'
      }
      getDicItem(params).then(res => {
        res.retData.forEach((val) => {
          this.sendVal.push({name: val.xlatshortname, value: val.fieldvalue})
        });
        this.sendLength = res.retData.length
      }).catch(res => {

      })
    },
    getBsif() {
      this.basicInfo = this.$route.params.bsifs
    }
  },
  watch: {
    '$route': 'getBsif'
  }
}
</script>
<style type="text/scss" lang="scss">
.content-box {
  padding: 0 10px;
  .important {
    width: 10px;
    color: red;
  }

  .line {
    display: flex;
    border-bottom: 1px solid #cccccc;
    line-height: 40px;
    .label {
      flex: 2;
      text-align: left;
      font-size: 14px;
    }
    .value {
      flex: 3;
      font-size: 13px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      color: #707070;
      input {
        width: 100%;
         padding-left: 15px;
      }
    }
    // .controls-box {
    //   flex: 3;
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    .select-control {
      flex: 3;
      text-align: left;
    }
    .date-control {
      flex: 3;
      text-align: left;
    }
    // .select-box {
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    // .icon {
    //   flex: 1;
    //   text-align: right;
    // }
  }
  .bsbtn{
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 70%;
    height: 32px;
    margin:30px 0;
    margin-left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }
  .submit-btn {
    position: absolute;
    bottom: 35px;
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }

  .remove-btn {
    position: absolute;
    bottom: 35px;
    background-color: #ff6633;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 55%;
    box-shadow: 3px 3px 5px #888888;
  }

  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>
